import React from 'react';
import { Layout, Space,Button } from 'antd';
import { StepForwardOutlined } from '@ant-design/icons';
import LeftMenu from '../../components/index/menu'
import TopHeader from '../../components/index/header'
import BottomFooter from '../../components/index/footer'
import Breadcrumb from '../../components/index/breadcrumb'
import { Outlet } from 'react-router-dom'
const { Header, Footer, Sider, Content } = Layout;

const headerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#333',
  height: 50,
  paddingInline: 50,
  lineHeight: '50px',
  backgroundColor: '#fff',
  borderBottom:'1px solid #eee',
  boxShadow:'0 1px 10px 0px rgba(0,0,0,0.1)',
  zIndex:2
};

const contentStyle: React.CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
};

const siderStyle: React.CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#fff',
};

const footerStyle: React.CSSProperties = {
  textAlign: 'center',
  color: '#333',
  height: 30,
  lineHeight:'30px',
  padding:'0px',
};
const Home: React.FC = () => {
    return (
        <Space direction="vertical" style={{ width: '100%',height:'100%',display:'flex' }} size={[0, 48]}>
        <Layout>
            <Header style={headerStyle}><TopHeader></TopHeader></Header>
            <Layout>
            <Sider style={siderStyle}><LeftMenu></LeftMenu></Sider>
            <Layout style={{width:'calc(100vw - 200px)'}}>
                <Breadcrumb></Breadcrumb>
                <Content style={contentStyle}>
                  <Outlet></Outlet>
                </Content>
                {/* <Footer style={footerStyle}><BottomFooter></BottomFooter></Footer> */}
            </Layout>
            </Layout>
        </Layout>
        </Space>
    );
};
export default Home;